<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script src="./js/jquery/jquery.js"></script>
<script src="./js/common/common.js"></script>
<script src="./js/common/errorCodeHandler.js"></script>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }
</style>
<body>
<h2>角色信息列表</h2>

<table style="width:40%">
    <thead>
    <tr>
        <th>ID</th>
        <th>角色</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>JohnDoe</td>
    </tr>
    </tbody>
    <!-- 添加更多用户信息行 -->
</table>
<script>

    initTable();

    function initTable() {
        $('table tbody tr').empty();

        $.ajax({
            type: "GET",
            url: "/study/manage/queryRoleInfoList",
            success: function (result, status, xhr) {
                if (!errorFilterHandler(result)) {
                    return;
                }
                $.each(result.data, function (index, role) {
                    $('table tr:last').after('<tr><td>' + role.id + '</td><td>' + role.name + '</td></tr>');
                });
            },
            // 失败时触发
            error: function (xhr, status, error) {
                console.log("请求失败触发，status:" + status);
            }
        });
    }

</script>

</body>
</html>